<template>
<v-touch @swiperight="handleSwipeRight" style="height:100%">
  <ul v-if="datalist" :key="datalist.length" style="margin-top:35px">
    <list v-for="data in datalist" :key="data.id" :data="data" @click.native="handleClick(data.id)"></list>
  </ul>
  <vueToTop type=7 right=10 bottom=80 size=36 color="#fff" class="totop" top=800></vueToTop>
</v-touch>
</template>
<script>
import list from '@/views/category/list'
import axios from 'axios'

export default {
  data () {
    return {
      datalist: null,
      loaddata: 0,
      loadstatus: true
    }
  },
  components: {
    list
  },
  mounted () {
    axios.get(`http://www.xiongmaoyouxuan.com/api/category/${this.$route.params.hotlistid}/items?start=0&sort=0`)
      .then(res => {
        if (res.data.data === null) {
          axios.get(`http://www.xiongmaoyouxuan.com/api/column/${this.$route.params.hotlistid}/items?start=0`)
            .then(res => {
              this.datalist = res.data.data.list
            })
        } else {
          this.datalist = res.data.data.items.list
        }
      })

    window.addEventListener('scroll', this.loadmore)
  },
  methods: {
    handleClick (id) {
      this.$router.push(`/c/${id}`) // 跳转详情页面
    },
    handleSwipeRight () {
      this.$router.back() // 右滑返回
    },
    loadmore () { // 滚动加载更多
      var height = document.documentElement.scrollTop + document.documentElement.clientHeight -
      document.documentElement.scrollHeight
      if (height >= -100 && this.loadstatus && height !== 0) {
        this.loadstatus = false
        this.loaddata += 20
        axios.get(`http://www.xiongmaoyouxuan.com/api/category/${this.$route.params.hotlistid}/items?start=${this.loaddata}&sort=0`)
          .then(res => {
            if (res.data.data == null) {
              axios.get(`http://www.xiongmaoyouxuan.com/api/column/${this.$route.params.hotlistid}/items?start=${this.loaddata}`)
                .then(res => {
                  this.datalist = this.datalist.concat(res.data.data.list)
                })
            } else {
              this.datalist = this.datalist.concat(res.data.data.items.list)
            }
            this.$nextTick(() => {
              this.loadstatus = true
            })
          })
      }
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.loadmore)
  }
}
</script>
<style lang="scss" scoped>
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.totop{
  border-radius: 50%;
  background: #2bb8f2;
  opacity: .8;
}

</style>
